<template>
	<div class="recommend">
		<div class="recommend-box">

			<div class="recommend-sticky" :style="[{top: stickyTop}]">
				<div class="recommend-header">
					<div class="tab">
						<div class="tab-item" :class="{active: sort === ''}" @click="clickTabHandle('')">
							<text>最新</text>
						</div>
						<div class="tab-item" :class="{active: sort === 'hot'}" @click="clickTabHandle('hot')">
							<text>热门</text>
						</div>
					</div>
					<div class="my-dynamic" @click="toMyDynamic">
						<text>我的动态</text>
						<i class="iconfont icon-right"></i>
					</div>
				</div>

				<recommendMenuTabVue @change='changeMenu' />
			</div>

			<recommendHotSwiperVue />

			<div class="list">
				<div class="list-item" v-for="(item, index) in listData" :key="index">
					<JxList :item='item' />
				</div>
			</div>
			<JxLoadMore :list="listData" :loadStatus='loadStatus' />
		</div>

	</div>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import file from '@/utils/file/index.js'
	import tools from '@/utils/tools/index.js'
	import articles from '@/api/articles/index.js'
	import JxList from '@/components/list/index.vue'
	import { useSystemStore } from '@/store/system.js'
	import { onReachBottom, onShow } from '@dcloudio/uni-app'
	import JxLoadMore from '@/components/LoadMore/index.vue'
	import recommendHotSwiperVue from './recommend-hot-swiper.vue';
	import recommendMenuTabVue from './recommend-menu-tab.vue';

	const systemStore = useSystemStore();

	const page = ref(1);
	const sort = ref('');
	const menu_id = ref('');
	const listData = ref([]);
	const loadStatus = ref('loadmore')

	const stickyTop = computed(() => systemStore.navbarInfo.total + 'px')

	async function initData() {
		page.value = 1;
		listData.value = await getList();
	}

	async function getList() {
		loadStatus.value = 'loading'
		const response = await articles.getList({ page: page.value, limit: 10, menu_id: menu_id.value, sort: sort.value });
		if (response['code'] == 200) {
			const list = response['data'].map(item => {
				item['cover'] = file.getFileUrls(item['cover']);
				item['user']['avatar'] = file.getFileUrl(item['user']['avatar']);
				item['shortDate'] = tools.shortDate(item['create_date'])
				return item;
			})

			loadStatus.value = list.length < 10 ? 'nomore' : 'loadmore';
			return list;
		}
		return [];
	}

	async function clickTabHandle(val) {
		page.value = 1;
		sort.value = val;
		tools.loading();
		listData.value = await getList();
		uni.hideLoading()
	}

	async function changeMenu({ index, item }) {
		page.value = 1;
		menu_id.value = item['_id'];
		tools.loading();
		listData.value = await getList();
		uni.hideLoading()
	}

	async function toMyDynamic() {
		uni.navigateTo({
			url: '/pages/sub/my/dynamic/index'
		})
	}

	onReachBottom(async () => {
		if (loadStatus.value === 'loadmore') {
			page.value++;
			const list = await getList();
			listData.value = listData.value.concat(list);
		}
	})

	onShow(() => {
		initData();
	})
</script>

<style lang="scss" scoped>
	.recommend {
		padding: 0 $side-width;
		margin-top: $side-width;
		padding-bottom: $side-width;

		.recommend-box {
			border-radius: 8px;
			padding: 0 $side-width;
			background: #fff;
			display: flex;
			flex-direction: column;
			padding-top: 12rpx;

			.recommend-sticky {
				background: #fff;
				position: sticky;
				left: 0;
				top: 0;
				z-index: 98;

				.recommend-header {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tab {
						display: flex;
						align-items: center;

						.tab-item {
							margin-right: 40rpx;
							height: 75rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							text {
								color: $uv-tips-color;
								font-size: 32rpx;
							}

							&.active {
								position: relative;

								text {
									color: $uv-main-color;
								}

								&::after {
									content: ' ';
									display: block;
									position: absolute;
									bottom: 0;
									left: 50%;
									transform: translateX(-50%);
									width: 100%;
									max-width: 40rpx;
									border-radius: 16px;
									height: 8rpx;
									background: $uv-primary;
								}
							}
						}
					}

					.my-dynamic {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						color: $uv-tips-color;

						.icon-right {
							color: $uv-tips-color;
							font-size: 24rpx;
						}
					}
				}
			}

			.list {
				.list-item {
					margin-top: $side-width;
					padding-bottom: $side-width ;
				}
			}
		}
	}
</style>